import {ParamStatusCircle} from '@/components/devCard/paramsCard'
import {DeviceStatusIcon} from '@/components/images'
import IsRead from '@/components/others/isRead'
import {View} from '@tarojs/components'

/**设备故障报警时 */
const TroubleItem: React.FC = (): JSX.Element => {
  return (
    <View className={`h-18 flex items-center mb-12`}>
      <View className="mr-6">
        <DeviceStatusIcon status={'error'}></DeviceStatusIcon>
      </View>
      <View className="hanzi h-18 leading-18 text-13 font-medium">故障</View>
    </View>
  )
}
/**设备离线报警时 */
const OffLineItem: React.FC = (): JSX.Element => {
  return (
    <View className={`h-18 flex items-center mb-12`}>
      <View className="mr-6">
        <DeviceStatusIcon status={'offLine'}></DeviceStatusIcon>
      </View>
      <View className="hanzi h-18 leading-18 text-13 font-medium">离线</View>
    </View>
  )
}
/**设备参数报警时 */
const ParamsItem: React.FC<{list: any[]}> = ({list}): JSX.Element => {
  return (
    <>
      {list?.map((item, index) => (
        <View
          className={`h-18 flex justify-center items-center mb-12 ${
            index !== list.length - 1 ? 'mr-16' : ''
          }`}
        >
          <View className="mr-6">
            <ParamStatusCircle status={item.paramStatus}></ParamStatusCircle>
          </View>
          <View className="min-w-26 font-normal text-13">{item.paramName}</View>
        </View>
      ))}
    </>
  )
}

const WarningRaw: React.FC<{
  type?: 'error' | 'offLine' | 'params'
  warning: Device.WarningLog
}> = ({type, warning}): JSX.Element => {
  return (
    <View className="px-16 relative">
      <View className="absolute top-6 right-22">
        <IsRead isRead={warning.isRead}></IsRead>
      </View>

      <View
        className="w-full  mb-10 bg-white rounded-card overflow-hidden px-12"
        onClick={() => {
          // if (['error', 'offLine'].includes(type)) {
          //   toHomeWarningInfo(devId)
          // } else {
          //   toHomeSingleDevParams(devId)
          // }
        }}
      >
        {/* 消息头部 */}
        <View className="w-full h-20 my-12 flex justify-between">
          <View className="hanzi flex-1 h-full text-15 font-medium truncate">
            {warning.devName}
          </View>
          <View className="hanzi w-116 h-13 text-11 text-xxx_text mt-4 truncate">
            {warning.devReportTime}
          </View>
        </View>
        {/* 消息内容，超长可换行 */}
        <View className="hanzi w-full min-h-18 break-words pb-12 text-13 leading-20">
          {/* {type === 'error' ? <TroubleItem></TroubleItem> : null}
        {type === 'offLine' ? <OffLineItem></OffLineItem> : null}
        {type === 'params' ? <ParamsItem list={list || []}></ParamsItem> : null} */}
          {warning.devReportContent}
        </View>
      </View>
    </View>
  )
}
export default WarningRaw
